<template>
  <view class="nearby-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input
          class="search-text"
          v-model="searchKeyword"
          type="text"
          placeholder="搜索门店名称"
          @input="handleSearchInput"
          @confirm="handleSearchConfirm"
        />
        <text v-if="searchKeyword" class="clear-btn" @click="clearSearch">✕</text>
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-item">
        <text>综合排序</text>
        <text class="filter-arrow">▼</text>
      </view>
    </view>

    <!-- 门店列表 -->
    <view  class="shop-list">
      <!-- 门店卡片1 -->
      <view v-for="item in merchants" :key="item.id" class="shop-card" @click="navigateToDetail(item.id)">
        <view class="shop-image-container">
          <image
            class="shop-image"
            :src="item.merchantImgs.img.split(',')[0]"
            mode="aspectFill"
          ></image>
          <view class="distance-tag">{{ item.distance *1000}}m</view>
        </view>
        <view class="shop-info">
          <view class="shop-name-row">
            <text class="shop-name">{{ item.name }}</text>
          </view>
          <view class="shop-rating">
            <text class="stars">{{ item.stars }}</text>
            <text class="score">{{item.rate}}分</text>
            <text class="sales">销量：322</text>
          </view>
          <view class="shop-details">
            <text class="business-hours">营业时间：周一至周日 {{ item.startTime.split('T')[1]?.split('.')[0]?.substring(0, 5)}}
              -{{ item.endTime.split('T')[1]?.split('.')[0]?.substring(0, 5)}}</text>
            <text class="address"> {{ item.address }}</text>
          </view>
        </view>
      </view>

     

      <!-- 暂无更多提示 -->
      <view class="no-more">
        <text>暂无更多</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import request from "@/utils/request";

// import { getCurrentLocation } from '@/utils/location'
const latitude = ref(null);
const longitude = ref(null);
const merchants = ref([]);
const searchKeyword = ref('');
const originalMerchants = ref([]); // 保存原始数据，用于搜索过滤
// 页面加载（接收参数）
onLoad((options) => {
  latitude.value = parseFloat(options.latitude);
  longitude.value = parseFloat(options.longitude);
  request({
    url:
      "/pyh/merchant/listDtoDistance?"+
      "latitude=" +
      latitude.value +
      "&longitude=" +
      longitude.value,
    method: "GET",
  }).then((res) => {
    if (res.code !== 200) {
      console.error("获取门店列表失败:", res.message);
      return;
    } else {
      console.log("获取到的门店列表:", res);
      // 保存原始数据
      originalMerchants.value = res.rows;
      // 处理评分星星显示
      originalMerchants.value.forEach((shop) => { 
        let rounded = Math.floor(shop.rate);
        shop.stars = '⭐'.repeat(rounded) + '☆'.repeat(5 - rounded);
      });
      // 初始化显示所有数据
      merchants.value = [...originalMerchants.value];
      console.log("门店列表:", merchants.value);
    }
  });

  console.log("接收到的参数:", latitude.value, longitude.value);

 
});
// 跳转到店铺详情页面
const navigateToDetail = (merchantId) => {
  uni.navigateTo({
    url: `../detail/detail?merchantId=${merchantId}`,
  });
};

// 处理搜索输入
const handleSearchInput = () => {
  performSearch();
};

// 处理搜索确认
const handleSearchConfirm = () => {
  performSearch();
};

// 执行搜索
const performSearch = () => {
  if (!searchKeyword.value.trim()) {
    // 如果搜索框为空，显示所有数据
    merchants.value = [...originalMerchants.value];
    return;
  }
  
  // 根据关键词过滤数据
  const keyword = searchKeyword.value.toLowerCase().trim();
  merchants.value = originalMerchants.value.filter(shop => 
    shop.name.toLowerCase().includes(keyword) ||
    shop.address.toLowerCase().includes(keyword)
  );
};

// 清空搜索
const clearSearch = () => {
  searchKeyword.value = '';
  merchants.value = [...originalMerchants.value];
};

// 页面加载时执行
onMounted(() => {
  console.log("页面加载了...");
});
</script>

<style scoped>
.nearby-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f8f8f8;
}

/* 搜索栏样式 */
.search-bar {
  padding: 20rpx;
  background-color: #ffffff;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 15rpx 20rpx;
}

.search-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
  color: #999999;
}

.search-text {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
  background-color: transparent;
  padding: 0;
}

.clear-btn {
  font-size: 24rpx;
  color: #999999;
  margin-left: 10rpx;
  padding: 5rpx;
  border-radius: 50%;
  background-color: #e0e0e0;
}

/* 筛选栏样式 */
.filter-bar {
  background-color: #ffffff;
  padding: 20rpx;
  border-bottom: 1rpx solid #eeeeee;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-arrow {
  font-size: 24rpx;
  margin-left: 10rpx;
  color: #666666;
}

/* 门店列表样式 */
.shop-list {
  padding: 20rpx;
}

.shop-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.shop-image-container {
  position: relative;
  width: 200rpx;
  height: 150rpx;
  margin-right: 20rpx;
}

.shop-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.distance-tag {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 24rpx;
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
}

.shop-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.stars {
  font-size: 24rpx;
  margin-right: 10rpx;
}

.score {
  font-size: 24rpx;
  color: #666666;
  margin-right: 20rpx;
}

.sales {
  font-size: 24rpx;
  color: #999999;
}

.shop-details {
  color: #999999;
  font-size: 26rpx;
  line-height: 1.5;
}

.business-hours,
.address {
  display: block;
  margin-bottom: 5rpx;
}

/* 暂无更多提示 */
.no-more {
  text-align: center;
  padding: 40rpx 0;
  color: #999999;
  font-size: 28rpx;
}
e-tag {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 24rpx;
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
}

.shop-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.stars {
  font-size: 24rpx;
  margin-right: 10rpx;
}

.score {
  font-size: 24rpx;
  color: #666666;
  margin-right: 20rpx;
}

.sales {
  font-size: 24rpx;
  color: #999999;
}

.shop-details {
  color: #999999;
  font-size: 26rpx;
  line-height: 1.5;
}

.business-hours,
.address {
  display: block;
  margin-bottom: 5rpx;
}

/* 暂无更多提示 */
.no-more {
  text-align: center;
  padding: 40rpx 0;
  color: #999999;
  font-size: 28rpx;
}
</style>
